<template>
    <div>
        <span v-for="(item,index) in searchArray" :key="index"
              :class="item === searchKey ? 'highlight' : 'normal' ">{{item}}</span>
    </div>
</template>

<script>
    export default {
        name: "searchHighlight",
        props: {
            datas: {
                type: Object,
                default: {}
            },
            searchKey: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                searchArray: []
            }
        },
        watch: {
            searchKey(value) {
                this._propertyDataChange()
            }
        },
        mounted() {
            this._propertyDataChange()
        },
        methods: {
            _propertyDataChange() {
                this.searchArray = this.getHilightStrArray(this.datas.name, this.datas.key)
            },
            getHilightStrArray(str, key) {
                return str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
            }
        }
    }
</script>

<style scoped>
    .highlight {
        color: #18C7A1;
    }

    .normal {
        color: #3E3A47;
    }

</style>
